<template>
    <div class="a">
        部门名称<input type="text" placeholder="请输入部门名称" v-model="formData.deptName">
        状态<el-select placeholder="部门状态" style="width: 200px; height: 30px; margin-left: 5px;" v-model="formData.status">
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
        </el-select>
        <el-button type="primary">搜索</el-button>
        <el-button @click="reset" plain>重置</el-button>
    </div>
    <div class="b">
        <!-- 新增，展开/折叠按钮 -->
        <el-button type="primary" plain @click="toInsert">+新增</el-button>
        <el-button type="info" plain>展开/折叠</el-button>
    </div>
    <div class="c">
        <el-table :data="page" style="width: 100%" row-key="deptId">
            <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="toUpdate(scope.row)" size="small" :row="scope.row">编辑</el-button>
                    <el-button type="danger" @click="toDelete(scope.row.postId)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog :destory-on-close="true" :title="title" v-model="isVisble" width="600px" :key="Math.random()">
        <router-view @ref-table="refTable" :data="data"></router-view>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/api/request'
import router from '@/router'
import { ElMessage } from 'element-plus'

let title = ref("")

let isVisble = ref(false)


let formData = ref({})

let data = ref({});

let page = ref([])
let columns = [
    { id: 'deptName', label: '部门名称' },
    { id: 'status', label: '状态' },
    { id: 'createTime', label: '创建时间' }

]
let loadData = () => {
    request({
        url: "/system/permission/department/tree",
        method: "get",
        params: {
            ...formData.value
        }
    }).then(res => {
        page.value = res.data;
        console.log(page.value)
    })
}
loadData()

// 重置
let reset = () => {
    formData.value = {}
    loadData()
}
let toDelete = (id) => {
    request({
        url: "/system/permission/department/" + id,
        method: "delete"
    }).then(res => {
        ElMessage.success("删除成功")
        loadData()
    })
}
let toInsert = () => {
    title.value = "添加部门"
    isVisble.value = true
    router.push('/system/permission/department/insert')
}
let toUpdate = (row) => {
    data.value = row
    console.log(row)
    title.value = "修改部门"
    isVisble.value = true
    router.push('/system/permission/department/update')
}
let refTable = () => {
    isVisble.value = false;
    loadData();
}


</script>

<style scoped>
input {
    width: 200px;
    margin: 0 10px;
    height: 30px;
    border: 1px solid #ccc;
}

.a {
    margin-left: 20px;
    margin-top: 10px;
    font-size: 14px;
}

.a input {
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    margin: 0 10px;

}

.a button {
    margin-left: 20px;
}

.b {
    margin-left: 20px;
    margin-top: 20px;
}

.c {
    margin-left: 20px;
    margin-top: 20px;
}
.d {
    /* 放到表格右下角 */
    position: absolute;
    right: 0;
    margin-top: 20px;
}
/* 鼠标悬浮到表格改变背景色 */
table tr:hover {
    background-color: #ccc;
}

</style>
